$vm_base: 750
$brand_main_color: #1e9bb1
$content_color: #666666
$title_color: #333333
$hint_color: #999999
@function vw($px)
    @return ($px / $vm_base) * 100vw

*
    margin: 0
    padding: 0
    //border: 1px solid red !important

a
    color: $title_color
    text-decoration: none

//---------------------------------------------------------BreadcrumbNavigation------------------------
.v-blank-50
    width: 100%
    height: vw(50)
    min-height: vw(50)

.v-blank-30
    width: 100%
    height: vw(30)
    min-height: vw(30)

.v-blank-20
    width: 100%
    height: vw(20)
    min-height: vw(20)

.v-blank-10
    width: 100%
    height: vw(10)
    min-height: vw(10)

//---------------------------------------------------------breadcrumb-navigation------------------------
.bread-container
    width: vw(750)
    height: auto
    display: flex
    justify-content: center

    .content-box
        width: vw(650)
        height: auto
        font-size: vw(18)

        .deactive
            color: $title_color

        .deactive:after
            content: ">"

        .active
            color: $brand_main_color

//---------------------------------------------------------header------------------------
.header-bar-container
    width: vw(750)
    height: vw(88)
    display: flex
    justify-content: center
    box-shadow: 0 0 vw(18) vw(18) #fafafa

    .content-box
        width: vw(670)
        height: vw(88)
        display: flex
        justify-content: space-between
        align-items: center

    .button
        width: vw(48)
        height: vw(48)
        background-repeat: no-repeat
        background-position: center center
        background-size: vw(38) vw(38)

    .home-button
        @extend .button
        background-image: url("images/index/bar-home.png")

    .phone-button
        @extend .button
        background-image: url("images/index/bar-phone.png")

    .logo
        width: vw(246)
        height: vw(59)
        background-image: url("images/index/logo.png")
        background-size: vw(246) vw(59)

.menu-container
    width: vw(750)
    height: vw(68)
    display: flex
    border-bottom: vw(1) solid #eeeeee

    .element
        width: vw(150)
        height: vw(68)
        display: flex
        justify-content: center
        align-items: center
        position: relative
        font-size: vw(26)
        color: $content_color

        .active
            font-size: vw(28)
            color: $title_color
            font-weight: 500

        .decoration
            display: none
            width: vw(20)
            height: vw(4)
            background-color: $brand_main_color
            position: absolute
            bottom: vw(4)

//---------------------------------------------------------title------------------------
.common-title
    width: auto
    height: auto
    display: flex
    flex-direction: column
    align-items: center

    .english
        font-size: vw(18)
        color: $content_color

    .chinese
        font-size: vw(28)
        display: flex
        align-items: center
        color: $title_color

        .decoration
            width: vw(52)
            height: vw(15)
            background-image: url("images/index/title-decoration.png")
            background-repeat: no-repeat
            background-size: vw(52) vw(15)
            margin: 0 vw(20)


.common-button
    width: vw(750)
    height: vw(48)
    display: flex
    justify-content: center

    .button
        width: vw(140)
        height: vw(44)
        line-height: vw(44)
        border: vw(2) solid gray
        text-align: center
        font-size: vw(24)

//---------------------------------------------------------footer------------------------
.footer-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    background-color: #000
    color: white
    margin-bottom: vw(98)

    .content-box
        width: vw(700)
        height: auto
        text-align: center

        .line
            font-size: vw(24)
            line-height: vw(48)

            a
                color: white

//---------------------------------------------------------rocket------------------------  
.back-to-top
    visibility: hidden
    width: vw(80)
    height: vw(80)
    background-image: url("images/index/back-to-top.png")
    background-size: vw(80) vw(80)
    background-position: center center
    position: fixed
    bottom: vw(150)
    right: vw(25)
    z-index: 9999 //最顶层

//---------------------------------------------------------bottom-bar------------------------
body
    width: vw(750)
    overflow-x: hidden
    padding-bottom: constant(safe-area-inset-bottom)
    padding-bottom: env(safe-area-inset-bottom)

.bottom-container
    width: vw(750)
    height: vw(98)
    padding-bottom: constant(safe-area-inset-bottom)
    padding-bottom: env(safe-area-inset-bottom)
    position: fixed
    bottom: 0
    z-index: 9998 //次顶层
    background-color: $brand_main_color
    display: flex
    justify-content: center
    box-shadow: 0 -1 vw(18) vw(18) #fafafa
    font-size: vw(22)

    .content-box
        width: vw(650)
        display: flex
        justify-content: space-between
        align-items: center

        .element
            width: vw(200)
            height: vw(80)
            display: flex
            flex-direction: column
            justify-content: space-between
            align-items: center
            color: white

            .bottom-contact
                width: vw(36)
                height: vw(48)
                background-image: url("images/index/bottom-contact.png")
                background-size: vw(36) vw(48)
                background-position: center center

            .bottom-search
                width: vw(49)
                height: vw(43)
                background-image: url("images/index/bottom-search.png")
                background-size: vw(49) vw(43)
                background-position: center center

            .bottom-test
                width: vw(44)
                height: vw(48)
                background-image: url("images/index/bottom-test.png")
                background-size: vw(44) vw(48)
                background-position: center center
